<template>
    <view class="register-container">
      <view class="register-content">
        <view class="register-form">
          <input 
            type="email" 
            v-model="email" 
            placeholder="请输入邮箱"
          />
          <View class="input-group">
              <input 
                  type="text" 
                  v-model="emailCode" 
                  placeholder="请输入邮箱验证码"
              />
              <button 
                  class="send-code-btn" 
                  :disabled="countdown > 0"
                  @click="sendEmailCode"
              >
                  {{ countdown > 0 ? `${countdown}s` : '发送邮箱验证码' }}
              </button>
          </View>	
  
          <input
              type="password"
              v-model="password"
              placeholder="请输入密码"
          />
          <input
              type="password"
              v-model="confirmPassword"
              placeholder="请输入确认密码"
          />
          <button class="submit-btn" @click="changePwdByEmail">提交</button>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref,onMounted,onUnmounted } from 'vue'
  import { useUserStore } from '@/stores/user'
  
  const userStore = useUserStore()
  
  // 表单数据
  const email = ref('')
  const emailCode = ref('')
  const password = ref('')
  const confirmPassword = ref('')

  const countdown = ref(0)
  let timer = null;
  
  onMounted(async() => {
    
  })

  onUnmounted(() => {
    timer && clearInterval(timer)
  })
  
  //开始倒计时
  const startCountdown = () => {
      countdown.value = 60
      timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(timer)
          countdown.value = 0
          timer = null;
        }
      }, 1000)
  }
  
  
  //发送邮箱验证码
  const sendEmailCode = async () => {
      if (!email.value) {
          uni.showToast({
          title: '请输入邮箱',
          icon: 'none'
          })
          return
      }		
  
      try {
          // TODO: 调用发送邮箱验证码接口
          await userStore.sendEmailCode({email:email.value,type:1})
          startCountdown();
          uni.showToast({
              title: '邮箱验证码发送成功',
              icon: 'success'
          })
      } catch (error) {
          console.log('userStore.sendEmailCode error',error);
          uni.showToast({
              title: '邮箱验证码发送失败:' + error.message,
              icon: 'none'
          })
      }
  }
  
  
  
  
  //修改密码
  const changePwdByEmail = async () => {
    if (!email.value || !emailCode.value || !password.value || !confirmPassword.value) {
      uni.showToast({
        title: '请填写完整信息',	
        icon: 'none'
      })
      return
    }	
  
    if(password.value !== confirmPassword.value){
      uni.showToast({
        title: '密码不一致',
        icon: 'none'
      })
      return
    }
  
  
    try {
      // TODO: 调用修改密码接口
      await userStore.changePwdByEmail({
        email: email.value,
        emailCode: emailCode.value,
        password: password.value,
        confirmPassword: confirmPassword.value
      })
      uni.showToast({
        title: '修改成功',
        icon: 'success'
      })
      uni.navigateTo({
        url: '/pages/login/index'
      })
    } catch (error) {
      uni.showToast({
        title: '修改失败:' + error.message,
        icon: 'none'
      })
    }
  }
  
  
  
  // 跳转到登录页
  const goToLogin = () => {
      uni.reLaunch({
          url: '/pages/login/index'
      })
  }
  </script>
  
  <style lang="scss">
  .register-container {
    padding: 40rpx;
    min-height: 100vh;
    background-color: #f8f8f8;
  }
  
  
  .register-content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
  }
  
  .register-form {
      input {
          height: 80rpx;
          padding: 0 20rpx;
          margin-bottom: 30rpx;
          border: 2rpx solid #eee;
          border-radius: 8rpx;
          font-size: 28rpx;
      }
        .input-group {
          display: flex;
      
          input {
                flex: 1;  
          }
      
          .send-code-btn {
              height: 80rpx;
              line-height:80rpx;
              margin-left: 20rpx;
              background-color: #007AFF;
              color: #fff;
              font-size: 24rpx;
              border-radius: 8rpx;
              
              &:disabled {
                  background-color: #ccc;
              }
          }
    }
    
      .submit-btn {
          width: 100%;
          height: 80rpx;
          background-color: #007AFF;
          color: #fff;
          font-size: 28rpx;
          border-radius: 8rpx;
          margin-bottom: 30rpx;
      }
  
      .login-link {
          text-align: center;
          color: #007AFF;
          font-size: 28rpx;
      }
  }
  
  .input-wrapper {
      position: relative;
      display: inline-block; /* 或者使用 flex，根据需要 */
      width: 100%; /* 根据需要调整宽度 */
      .custom-input {
      }
       
      .input-icon {
        position: absolute;
        right: 10px; /* 图标距离输入框右侧的距离 */
        top: 40%;
        transform: translateY(-60%); /* 垂直居中 */
        width: 200rpx; /* 根据需要调整图标大小 */
        height: 50rpx;
      z-index: 99;
      }
    }
  </style> 